<template>
  <div>
    <el-button type="primary" @click="onSelect" v-prevent-reclick>确定时传递值,then返回</el-button>
    <el-button type="primary" @click="onCancel" v-prevent-reclick>关闭</el-button>
    <br />
    <el-form :model="params" label-width="auto" v-for="item in 5" :key="item">
      <el-form-item label="Activity name">
        <el-input v-model="params.userName" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select v-model="params.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker v-model="params.date1" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="params.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="params.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="params.type">
          <el-checkbox value="Online activities" name="type">
            Online activities
          </el-checkbox>
          <el-checkbox value="Promotion activities" name="type">
            Promotion activities
          </el-checkbox>
          <el-checkbox value="Offline activities" name="type">
            Offline activities
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            Simple brand exposure
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="params.resource">
          <el-radio value="Sponsor">Sponsor</el-radio>
          <el-radio value="Venue">Venue</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
/** 全局引入 */
import { ref, reactive, watch, computed, onBeforeMount, onMounted, onUnmounted, inject, defineEmits, defineAsyncComponent } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const $common: any = inject('$common')
const $DialogBox: any = inject('$DialogBox')
const emits = defineEmits(['cancel', 'ok', 'buttons-ready'])

/** props数据 */
const props = defineProps({
  params: {
    type: Object,
    default: {},
  },
})
/** 定义数据 */
console.log('props.params', props.params)
const params = reactive(props.params);
/** 侦听 */
/** 计算 */
/** 方法 */
const onSelect = () => {
  const action = params;
  action.message = '对话框提交选择按钮'
  emits('ok', action);
}
const onCancel = () => {
  emits('cancel');
}
/** 对话框的操作按钮 */
const buttons = ref([
  {
    title: '取消',
    plain: true,
    click: () => {
      emits('cancel');
    }
  },
  {
    title: '确定',
    click: () => {
      emits('ok', { name: '我是自定义对话框传递的参数' });
    }
  },
  {
    title: '警告',
    type: 'warning',
    click: () => {
      emits('ok', { name: 'danger' });
    }
  },
  {
    title: '危险',
    type: 'danger',
    click: () => {
      emits('ok', { name: 'danger' });
    }
  },
]);
onMounted(() => {
  emits('buttons-ready', buttons.value);
});
onBeforeMount(() => {
  console.log('挂载前-params:', props.params);
})
onUnmounted(() => { })

</script>